<template>
	<div v-show="step === 1" class="person-form-div">
		<div class="person-form-title-base">{{ $t('基本信息') }}</div>
		<y9Form :config="y9FormBaseConfig" ref="y9FormBaseRef"></y9Form>
		<div class="person-form-title-person">{{ $t('个人信息') }}</div>
		<y9Form :config="y9FormPersonConfig" ref="y9FormPersonRef"></y9Form>
	</div>
	<div v-show="step === 2" class="step2-div">
		<div  class="table-item">
			<div class="text">{{ $t('选择已有岗位') }}</div>
			<y9Table v-model:selectedVal="tableForm.positionIds" :config="positionListTableConfig"></y9Table>
		</div>
		<div class="table-item">
			<div class="text">{{ $t('通过选择职位新增岗位') }}</div>
			<y9Table v-model:selectedVal="tableForm.jobIds" :config="jobListTableConfig"></y9Table>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { useI18n } from "vue-i18n"
	import { $keyNameAssign,$dataType } from '@/utils/object'
	import { $validCheck } from '@/utils/validate'
	import { $dictionary } from '@/utils/data'
	import {loginNameCheck,getPersonExtById,getPersonExtByIdWithEncry} from '@/api/person/index';
	import { listByType,getJobList } from '@/api/dictionary/index';
	import { getPositionsByParentId } from '@/api/position/index';
	import { $dictionaryFunc } from '@/utils/data'
	import moment from "moment";
	import { useSettingStore } from "@/store/modules/settingStore"
	import { inject, ref, watch } from "vue";
	const { t } = useI18n();
	const settingStore = useSettingStore();
	// 注入 字体变量
	const fontSizeObj: any = inject('sizeObjInfo');
	const props = defineProps({
		
		currInfo: {//当前信息
			type: Object,
			default: () => { return {} }
		},
		
		step:{//步骤
			type:Number,
		
		}
	})



//移动电话号码格式校验规则
const mobileValidator = (rule,value,callback) => {
	let result =  $validCheck('phone',value,true);
	if(!result.valid){
			callback(new Error( t(result.msg)));
	}else{
		callback()
	}
}
//是否存在登录名的校验规则
const hasLoginNameValidator  = async (rule,value,callback) => {
	let result =  await loginNameCheck('', value)
	if (!result.data) {
		callback(new Error(t('该登录名称已存在，请重新输入登录名称')));
	}else{
		callback()
	}
}


//基本信息表单配置
const y9FormBaseConfig = ref({
	descriptionsFormConfig:{ //描述表单配置
		column: settingStore.device === 'mobile' ? 1 : 3,
		labelAlign: "center",
		labelWidth: "150px",
		contentWidth: "200px",
	},
	model:{},//表单属性
	rules:{ //表单校验规则
		name: [
			{ required: true, message: computed(() => t("请输入人员名称")), trigger: 'blur' }
		],
		loginName: [
			{ required: true, message: computed(() => t("请输入登录名称")), trigger: 'blur' },
			{ validator: hasLoginNameValidator, trigger: 'blur'},
		],
		mobile: [
			{ required: true, message: computed(() => t("请输入移动电话")), trigger: 'blur' },
			{ validator: mobileValidator, trigger: 'blur'},
		],
	},
	itemList:[ //表单显示列表
		{
			type: "input",
			prop: "name",
			label: computed(() => t("人员名称")),
		},
		{
			type: "input",
			prop: "loginName",
			label: computed(() => t("登录名称")),
		},
		{
			type: "input",
			prop: "customId",
			label: computed(() => t("自定义ID")),
		},
		{
			type: "input",
			prop: "caid",
			label: computed(() => t("CA认证码")),
		},
		{
			type: "select",
			prop: "sex",
			label: computed(() => t("性别")),
			props: {
				options:[],
			}
		},
		{
			type: "select",
			prop: "official",
			label: computed(() => t("是否在编")),
			props: {
				options:[],
			}
		},
		{
			type: "input",
			prop: "officeAddress",
			label: computed(() => t("办公室")),
		},
		{
			type: "input",
			prop: "officePhone",
			label: computed(() => t("办公电话")),
		},
		{
			type: "input",
			prop: "officeFax",
			label: computed(() => t("办公传真")),
		},
		{
			type: "select",
			prop: "disabled",
			label: computed(() => t("是否禁用")),
			props: {
				options:[],
			}
		},
		{
			type: "input",
			prop: "email",
			label: computed(() => t("电子邮件")),
		},
		{
			type: "input",
			prop: "mobile",
			label: computed(() => t("移动电话")),
		},
	]
	
})
//个人信息表单配置
const y9FormPersonConfig = ref({
	descriptionsFormConfig:{ //描述表单配置
		column: settingStore.device === 'mobile' ? 1 : 3,
		labelAlign: "center",
		labelWidth: "150px",
		contentWidth: "200px",
	},
	model:{},//表单属性
	rules:{},//表单验证规则
	itemList:[ //表单显示列表
		{
			type: "select",
			prop: "maritalStatus",
			label: computed(() => t("婚姻状况")),
			props: {
				options: [],
			}
		},
		{
			type: "input",
			prop: "professional",
			label: computed(() => t("专业")),
		},
		{
			type: "input",
			prop: "city",
			label: computed(() => t("居住城市")),
		},
		{
			type: "input",
			prop: "country",
			label: computed(() => t("居住国家")),
		},
		{
			type: "input",
			prop: "homePhone",
			label: computed(() => t("家庭电话")),
		},
		{
			type: "select",
			prop: "idType",
			label: computed(() => t("证件类型")),
			props: {
				options: [],
			}
		},
		{
			type: "input",
			prop: "idNum",
			label: computed(() => t("证件号码")),
		},
		{
			type: "select",
			prop: "politicalStatus",
			label: computed(() => t("政治面貌")),
			props: {
				options: [],
			}
		},
		{
			type: "date",
			prop: "workTime",
			label: computed(() => t("入职日期")),
			props: {
				dataType: 'date',
				format:'YYYY-MM-DD',
				valueFormat:'YYYY-MM-DD',
				options: [],
			}
		},
		{
			type: "select",
			prop: "education",
			label: computed(() => t("学历")),
			props: {
				options: [],
			}
		},
		{
			type: "input",
			prop: "province",
			label: computed(() => t("人员籍贯")),
		},
		{
			type: "date",
			prop: "birthday",
			label: computed(() => t("出生日期")),
			props: {
				dataType: 'date',
				format:'YYYY-MM-DD',
				valueFormat:'YYYY-MM-DD',
				options: [],
			}
		},
		{
			type: "input",
			prop: "homeAddress",
			label: computed(() => t("家庭住址")),
			span: 3,
		},
		{
			type: "textarea",
			prop: "description",
			label: computed(() => t("人员描述")),
			span: 3,
		},
	]
	
})
	

let jobListTableConfig = ref({//职位列表的表格配置
	columns:[
		{
			type:"selection",
			width:100,
			selectable:() => {
				return true
			}
		},
		{
			title: computed(() => t("职位")),
			key: "name",
			width: 200,
		},
	],
	tableData:[],
	pageConfig:false,//取消分页
})
	
let positionListTableConfig = ref({//岗位列表的表格配置
	columns:[
		{
			type:"selection",
			width:100,
			selectable:(row,index) =>{
				if(row.headCount<row.capacity){
					return true
				}else {
					return false
				}
			}
		},
		{
			title: computed(() => t("岗位")),
			key: "name",
			width: 200,
		},
		{
			title: computed(() => t("占用岗位")),
			key: "headCount",
			width: 100,
		},
		{
			title: computed(() => t("岗位容量")),
			key: "capacity",
			width: 100,
		},
	],
	tableData:[],
	pageConfig:false,//取消分页
})

const tableForm = ref({
	positionIds:[],
	jobIds:[],
})

onMounted(async ()=>{
			await $dictionaryFunc('dutyLevel',listByType,'dutyLevel')//请求职级
			await $dictionaryFunc('duty',listByType,'duty')//请求职务
			await $dictionaryFunc('officialType',listByType,'officialType')//请求编制类型
			await $dictionaryFunc('principalIDType',listByType,'principalIDType')//请求证件类型
			await $dictionaryFunc('positionList',getPositionsByParentId,props.currInfo.id)//获取岗位列表
			await $dictionaryFunc('jobList',getJobList)//获取职位列表
			
			for(let i = 0 ; i < y9FormBaseConfig.value.itemList.length; i++) {
				const item = y9FormBaseConfig.value.itemList[i];
				
				if(item.prop === 'sex'){
					item.props.options = $dictionary().sex?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}else if(item.prop === 'official'){
					item.props.options = $dictionary().booleanNum?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}else if(item.prop === 'disabled'){
					item.props.options = $dictionary().boolean?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}
			}

			y9FormBaseConfig.value.model = {sex: 1, official: 1};
		
			
			for(let i = 0 ; i < y9FormPersonConfig.value.itemList.length; i++) {
				const item = y9FormPersonConfig.value.itemList[i];
				
				if(item.prop === 'maritalStatus'){
					item.props.options = $dictionary().maritalStatus?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}else if(item.prop === 'idType'){
					item.props.options = $dictionary().principalIDType?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}else if(item.prop === 'politicalStatus'){
					item.props.options = $dictionary().politicalStatus?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}else if(item.prop === 'education'){
					item.props.options = $dictionary().education?.map(item => {
						return {
							label: computed(() => t(item.name)),
							value: item.id
						}
					})
				}
			}
		
			jobListTableConfig.value.tableData = $dictionary().jobList;
			positionListTableConfig.value.tableData = $dictionary().positionList;
			
			
});
	


const y9FormBaseRef = ref()
function validForm() {
	return y9FormBaseRef.value.elFormRef?.validate(valid => valid);
}
const y9FormPersonRef = ref()
const personForm = computed(() => {
	return Object.assign({parentId:props.currInfo.id},y9FormBaseRef.value?.model,y9FormPersonRef.value?.model,tableForm.value)
})

defineExpose({
	personForm,
	validForm,
})
</script>

<style lang="scss" scoped>
	.person-form-div{
		display: flex;
		flex-direction: column;
		.person-form-title-base{
			color: var(--el-text-color-primary);
			text-align: center;
			line-height: 40px;
			border-top: 1px solid var(--el-border-color-lighter);
			border-left: 1px solid var(--el-border-color-lighter);
			border-right: 1px solid var(--el-border-color-lighter);
		}
		.person-form-title-person{
			color: var(--el-text-color-primary);
			text-align: center;
			line-height: 40px;
			border-left: 1px solid var(--el-border-color-lighter);
			border-right: 1px solid var(--el-border-color-lighter);
		}
	}
	.step2-div{
		display: flex;
		justify-content: space-around;
		padding: 20px 50px;
		.table-item{
			border: solid 1px #eee;
			border-radius: 4px;
			margin: 0 20px;
			padding:  20px 40px;
			box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.06);
			
			.text{
				color: #666;
				margin-bottom: 10px;
			}
		}
	}
</style>